<?php ob_start() ?>

    <!-- 主内容区 -->
    <div class="pt-16 pb-8 min-h-screen">
        <div class="container mx-auto px-4">
            <!-- 页面标题 -->
            <div class="mt-8 mb-6 flex flex-col md:flex-row md:items-center md:justify-between">
                <div>
                    <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-800">研学基地搜索</h2>
                </div>
                <div class="mt-4 md:mt-0 flex space-x-3">
                    <div class="relative">
                        <form action="<?= site_url('/search') ?>" method="get">
                            <input type="text" name="keyword" placeholder="搜索研学地点"
                                class="pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-200 w-full md:w-64"
                                value="<?php echo isset($keyword) ? htmlspecialchars($keyword) : ''; ?>">
                            <i class="fa-solid fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                        </form>
                    </div>
                </div>
            </div>

            <!-- 搜索结果 -->
            <?php if (isset($searchResults) && count($searchResults) > 0): ?>
                <div class="space-y-8">
                    <?php foreach ($searchResults as $result): ?>
                        <!-- 包裹在 <a> 标签中 -->
                        <a href="<?= $result['intro_url'] ?>" class="block bg-white rounded-xl shadow-lg p-6 transform transition-all duration-500 hover:shadow-xl hover-scale" onclick="recordClick(<?= $result['id'] ?>);">
                            <!-- 地点名称 -->
                            <h3 class="text-xl font-bold text-gray-800 mb-1">第<?= $result['location_order'] ?>号 <?= $result['name'] ?></h3>
                            <!-- 简介 -->
                            <p class="text-gray-600 mb-2"><?= $result['description'] ?></p>
                            <!-- 所在区域，所属类型，参考价格 -->
                            <p class="text-gray-600">
                                地区: <?= $result['district'] ?> | 
                                基地分类: <?= $result['type'] ?> |
                                车程: 约<?= $result['distance'] ?>分钟 |
                                参考价格: <?= $result['price'] ?> | 
                                权值分数: <?= $result['total_score'] ?> | 
                            </p>
                        </a>
                    <?php endforeach; ?>
                </div>

                <!-- 分页 -->
                <div class="px-6 py-4 bg-gray-50 border-t border-gray-200 flex items-center justify-between mt-8">
                    <div class="text-sm text-gray-700">
                        显示 <span class="font-medium"><?= $startIndex + 1 ?></span> 到 <span class="font-medium"><?= $endIndex ?></span> 条，共 <span class="font-medium"><?= $totalRecords ?></span> 条记录
                    </div>
                    <div class="flex space-x-2">
                        <button id="prevPageBtn"
                            class="px-3 py-1 border border-gray-300 rounded-md text-gray-700 bg-white hover:bg-gray-50 <?php if ($currentPage == 1) echo 'disabled:opacity-50 disabled:cursor-not-allowed' ?>"
                            <?php if ($currentPage == 1) echo 'disabled' ?>>
                            <i class="fa-solid fa-chevron-left"></i>
                        </button>
                        <?php for ($i = 1; $i <= $totalPages; $i++): ?>
                            <button
                                class="px-3 py-1 border border-gray-300 rounded-md text-gray-700 bg-white hover:bg-red-700 <?php if ($i == $currentPage) echo 'bg-red-600 text-black border-gray-600 hover:bg-gray-700' ?>"
                                onclick="window.location.href='?keyword=<?= urlencode($keyword) ?>&page=<?= $i ?>'">
                                <?= $i ?>
                            </button>
                        <?php endfor; ?>
                        <button id="nextPageBtn"
                            class="px-3 py-1 border border-gray-300 rounded-md text-gray-700 bg-white hover:bg-gray-50 <?php if ($currentPage == $totalPages) echo 'disabled:opacity-50 disabled:cursor-not-allowed' ?>"
                            <?php if ($currentPage == $totalPages) echo 'disabled' ?>>
                            <i class="fa-solid fa-chevron-right"></i>
                        </button>
                    </div>
                </div>
            <?php elseif (isset($keyword) && strlen($keyword) > 0): ?>
                <p class="text-gray-600">未找到相关结果。</p>
            <?php endif; ?>
        </div>
    </div>
    <script>
    function recordClick(page_id) {
        fetch('<?= site_url('/record-click-activity/') ?>', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ page_id: page_id })
        })
       .then(response => response.json())
       .then(data => console.log(data));

    }
    </script>
<?php $content = ob_get_clean() ?>

<?= view('layouts/base', ['content' => $content]) ?>